<template>
  <div>
    <van-nav-bar title="今日打卡" />
    <van-image width="100%" height="50%" src="/clock.png" class="img" />

    <van-swipe-cell v-for="(item, i) in healthyList" :key="item.idx">
      <van-button class="btnType" :border="false">{{
        item.content
      }}</van-button>
      <template #right>
        <van-button
          class="delete-button"
          @click="clickIn(item.idx, i)"
          square
          type="primary"
          text="打卡"
        />
        <van-button
          square
          text="删除"
          type="danger"
          @click="deldialog(item.idx)"
          class="delete-button"
        />
      </template>
    </van-swipe-cell>

    <van-button type="default" class="btnType" @click="onClick()"
      >自定义添加</van-button
    >
    <van-dialog
      v-model="showDialog"
      title="添加"
      show-cancel-button
      @confirm="handleConfirm"
      @cancel="handleCancel"
    >
      <van-form>
        <van-field
          v-model="clockContent"
          maxlength="8"
          placeholder="内容不能超过8位"
        />
      </van-form>
    </van-dialog>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  mounted() {
    this.loadData();
  },
  computed: {
    ...mapState(["uid", "islogin"]),
  },

  data() {
    return {
      show: false,
      clockContent: "",
      showDialog: false,
      message: "",
      healthyList: [],
      colorId: null,
    };
  },
  methods: {
    addZero(s) {
      return s < 10 ? "0" + s : s;
    },
    //获取当前时间
    getNowTime() {
      let date = new Date();
      //年 getFullYear()：四位数字返回年份
      let year = date.getFullYear(); //getFullYear()代替getYear()
      //月 getMonth()：0 ~ 11
      let month = date.getMonth() + 1;
      //日 getDate()：(1 ~ 31)
      let day = date.getDate();
      //时 getHours()：(0 ~ 23)
      let hour = date.getHours();
      //分 getMinutes()： (0 ~ 59)
      let minute = date.getMinutes();
      //秒 getSeconds()：(0 ~ 59)
      let second = date.getSeconds();
      let time =
        year +
        "-" +
        this.addZero(month) +
        "-" +
        this.addZero(day) +
        " " +
        this.addZero(hour) +
        ":" +
        this.addZero(minute) +
        ":" +
        this.addZero(second);
      return time;
    },

    onClick() {
      if (this.islogin == true || this.islogin == "true") {
        this.showDialog = true;
      }else{
         this.$router.push("/login");
      }

    },
    // 取消
    handleCancel() {
      this.clockContent = "";
    },
    // 存实例弹窗确认添加
    handleConfirm() {
      if (this.clockContent.trim() == "") {
        return (this.clockContent = "");
      }
      let idx = 0;
      if (this.healthyList.length == 0) {
        idx = 0;
      } else {
        idx = this.healthyList[this.healthyList.length - 1].idx + 1;
      }
      let params = `zid=${this.uid}&idx=${idx}&content=${
        this.clockContent
      }&timer=${this.getNowTime()}`;
      let url = "v1/users/zdyclock";
      this.axios.post(url, params).then((res) => {
        this.healthyList = [];
        this.loadData();
      });
      this.clockContent = "";
    },

    // 打卡
    clickIn(idx, i) {
      // console.log(this.getNowTime());
      console.log(this.healthyList[i].content);

      let params = `kid=${this.uid}&content=${
        this.healthyList[i].content
      }&timer=${this.getNowTime()}`;
      let url = "v1/users/updataclock";
      this.axios.post(url, params).then((res) => {
        console.log(res);
        this.deldialog(idx);
      });

      // this.healthyList.splice(i, 1);
    },
    // 删除
    deldialog(i) {
      this.healthyList.splice(i, 1);
      let url = `v1/users/deleteczdy?zid=${this.uid}&idx=${i}`;
      this.axios.delete(url).then((res) => {
        this.healthyList = [];
        this.loadData();
      });
    },
    // 读取
    loadData() {
      let url = "v1/users/zdyinfo?zid=" + this.uid;
      this.axios.get(url).then((res) => {
        if (res.data.code == 201) {
          return;
        }
        res.data.data.forEach((element) => {
          this.healthyList.push({ idx: element.idx, content: element.content });
        });
      });
    },
  },
};
</script>


<style scoped>
.btnType {
  border: 1px solid rgb(170, 160, 160);
  border-radius: 4px;
  font-size: 25px;
  width: 100%;
  font-size: 16px;
  margin-top: 10px;
  background: #fff;
  height: 60px;
  box-sizing: border-box;
}
.delete-button {
  border: 1px solid rgb(170, 160, 160);
  /* border-radius: 4px; */
  font-size: 25px;
  font-size: 16px;
  margin-top: 10px;
  height: 60px;
}
</style>